<template>
  <div class="customer-detail">

    <div class="details">
      <van-collapse v-model="activeName" accordion v-for="(item, index) in customerList" :key="index">
        <van-collapse-item :title="'顾客姓名：' + item.user_name + ' / 电话：' + item.phone" :name="item.orderid">
          <div>
            <span>订单号码：{{item.orderid}}</span><br>
            <span>下单菜品： <span v-for=" items in item.detail" :key="items.id">{{items.productname}}</span></span><br>
            <span>下单数量：{{item.amount}}份</span><br>
            <span>金额：￥{{item.totalfee}}</span><br>
            <span>下单时间：{{item.orderat}}</span>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
    <van-empty description="暂无客源" v-if="customerList.length == 0" />
  </div>
</template>

<script>
import Vue from 'vue';
import { Collapse, CollapseItem } from 'vant';
import { Toast } from 'vant'
import { Empty } from 'vant';
Vue.use(Collapse, CollapseItem, Empty, Toast);

export default {
  name: '',
  data () {
    return {
      activeName: 0,
      customerList: [],
      shopid: '',
    }
  },
  created () {
    this.shopid = this.$route.query.id
    let params = new FormData()
    params.append("shopid", this.shopid)
    this.$axios
      .post("/shoporderlist", params)
      .then((res) => {
        if (res.data.code == 1) {
          this.customerList = res.data.list
        } else {
          Toast.fail("加载失败，请重试");
        }
      })
      .catch((err) => {
        Toast.fail(err + "数据加载失败");
      });
  },
}
</script>


<style lang="less" scoped>
.customer-detail {
  display: flex;
  flex-direction: column;
}
</style>